Estoy tratando de implementar firebase en mi aplicación React pero parece que mi versión de importación está desactualizada. Aquí está mi código:
import firebase from "firebase/app"; import "firebase/auth"; const app = firebase.initializeApp({ apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID, }); export const auth = app.auth(); export default app;Reemplacé mis claves de configuración con process.env.REACT_APP_FIREBASE... ya que están almacenadas en otro archivo .env local. También probé diferentes formas de importar firebase, pero parece que la mayoría de las publicaciones están desactualizadas. Este es el error que estoy recibiendo:
./src/firebase.js Intento de error de importación: 'firebase/app' no contiene una exportación predeterminada (importada como 'firebase').
También tengo otro archivo para authContext, por lo que tendré que mantener la palabra clave 'auth' en mi archivo firebase.js:
import React, { useContext, useState, useEffect } from "react"; import { auth } from "../firebase"; const AuthContext = React.createContext(); export function useAuth() { return useContext(AuthContext); } const AuthProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState(); function signup(email, password) { return auth.createUserWithEmailAndPassword(email, password); } useEffect(() => { const unsubscribe = auth.onAuthStateChanged((user) => { setCurrentUser(user); }); return unsubscribe; }, []); const value = { currentUser, signup, }; return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; }; export default AuthProvider;Siga las instrucciones en la documentación , que menciona específicamente los pasos para la versión 9:
- Instale Firebase usando npm:
npm install firebase
- Inicialice Firebase en su aplicación y cree un objeto de aplicación de Firebase:
import { initializeApp } from 'firebase/app'; // TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { //... }; const app = initializeApp(firebaseConfig);
Esto es completamente diferente a cualquier método para cualquier versión anterior de los SDK de Firebase. Tenga en cuenta que está importando funciones individuales del SDK de Firebase, no objetos ni espacios de nombres.
Para trabajar con Firebase Auth, siga nuevamente las instrucciones en la documentación para v9:
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); createUserWithEmailAndPassword(auth, email, password);Nuevamente, tenga en cuenta que está importando funciones para llamar directamente, no objetos con métodos.
Compare con el proceso anterior con la versión 8: Actualizar a Firebase JS 8.0.0: Intento de error de importación: 'aplicación' no se exporta de 'firebase/app' (importado como 'firebase')
Debe cambiar su versión de firebase a 8.9.1 si está usando la versión 9.0
y luego importa firebase así:
importar base de fuego desde "base de fuego/aplicación"
Con la versión 9, las cosas cambiaron un poco para importar firebase, pero no hay necesidad de cambiar a una versión anterior, hay una opción de "compatibilidad" para que pueda usar la carpeta /compat en sus importaciones, como esta
import firebase from 'firebase/compat/app';De la guía de actualización de Firebase:
Para mantener su código funcionando después de actualizar su dependencia de v8 a v9 beta, cambie sus declaraciones de importación para usar la versión "compatible" de cada importación. Por ejemplo:
// v9 compat packages are API compatible with v8 code import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore';
Verifique su versión de Firebase usando el siguiente comando en npm
$ base de fuego -V
Si su versión de firebase es v8, importe de la siguiente manera
importar firebase desde "firebase/app" importar "firebase/auth"
Si su versión de firebase es v9, importe de la siguiente manera
importar firebase desde 'firebase/compat/app'; importar 'firebase/compat/auth';
Desinstale y vuelva a instalar firebase a una versión anterior. Acabo de hacer esto, instalé la versión 8.10.0 y funciona bien.
debe hacer esto si lo hace el 21 de octubre y días posteriores
import {initializeApp} from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' import 'firebase/storage' var config = { apiKey: "xxxxx", authDomain: "xx.firebaseapp.com", projectId: "cxxx7", storageBucket: "cxxx", messagingSenderId: "xx", appId: "zzze", measurementId: "xxx" } const firebaseApp = initializeApp(config); export default firebaseApp;El error surge cuando está utilizando Firebase mayor que V8.
Sin embargo, hay una solución fácil para esto, firebase incluye compatibilidad con versiones anteriores. Todo lo que necesita hacer es cambiar su importación de firebase/app a firebase/compat/app .
Esto cambiará:
import firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth';para:
import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import 'firebase/compat/auth';Firebase v9 viene con una nueva API diseñada para facilitar la sacudida de árboles (eliminación de código no utilizado). Esto hará que su aplicación web sea lo más pequeña y rápida posible.
Los paquetes /compat se crean por motivos de compatibilidad y para facilitar la actualización a la API modular. Con la desventaja de no obtener las ventajas de rendimiento. Para obtener los beneficios de rendimiento del diseño modular, use getApps en su lugar:
import { getApps, initializeApp } from 'firebase/app'; if (!getApps().length) { initializeApp({ // your config }); } Desde el JSDoc de la biblioteca: getApps devuelve A (read-only) array of all initialized apps. .
También hay una función getApp que, When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.